<template>
    <!-- EA-BA-DA-我的账户 -->
    <div id="wrap" class="box-shadow">
        <setting-item :show-change="phoneChange" v-on:change-content="phoneChangeMethod" class="item" :p-content1="phoneNumber" :p-content2="phoneContent" :icon="iconphone"></setting-item>
        <setting-item :show-change="weChatChange" class="item" :p-content1="weChatNumber" :p-content2="weContent" :icon="iconwechat"></setting-item>
        <setting-item :show-change="bankChange" v-on:change-content="bankChangeMethod" class="item" :p-content1="bankNumber" :p-content2="bankContent" :icon="iconbank"></setting-item>
        <setting-item :show-change="loginChange" v-on:change-content="changeLoginPwd" class="item" :p-content1="loginPassword" :p-content2="loginContent" :icon="iconlogpwd"></setting-item>
        <setting-item :show-change="payChange"  v-on:change-content="payChangeMethod" class="item" :p-content1="payPassword" :p-content2="payContent" :icon="iconpaypwd"></setting-item>
        <setting-item :show-change="quickChange" class="item" :p-content1="quickPassword" :p-content2="quickContent" :icon="iconqkpwd"></setting-item>
        <setting-item :show-change="securityChange" class="item" :p-content1="security" :p-content2="securityContent" :icon="iconques"></setting-item>
        <password-change v-on:cancel="showPWDC=false" :show-password-change="showPWDC"></password-change>
        <security-setting-phone v-on:save="savePhone" v-on:cancel="showPhoneSetting=false" :show-setting-phone="showPhoneSetting"></security-setting-phone>
        <security-setting v-on:save="saveBank" v-on:cancel="showBank=false" :show-bank-setting="showBank"></security-setting>
    </div>
</template>

<script>
import settingItem from './settingItem'
import passwordChange from './passwordChange'
import securitySettingPhone from './securitySettingPhone'
import securitySetting from './securitySetting'
import { connect } from 'net';

export default {
    name: 'settingAccount',
    data(){
        return{
            //绑定手机号
            phoneNumber: '绑定手机号',    //第一行
            phoneContent: '获取实时验证码方式，保证账户资金安全。', //第二行
            phoneChange: true,      //控制显示修改按钮
            showPhoneSetting: false,    //控制显示设置手机号
            iconphone: 'iconnav_shoujigoucai',
            //绑定微信
            weChatNumber: '已绑定微信：130***20',
            weContent: '实时验证码的方式最安全的保证了您的资金安全。',
            weChatChange: false,
            iconwechat: 'iconshezhi_weixin',
            //绑定银行卡
            bankNumber: '绑定银行卡：',
            bankContent: '用于提现的银行卡',
            bankChange: true,
            showBank: false,    //控制显示绑定银行卡组件
            iconbank: 'iconshezhi_yinhangka',
            //登录密码
            loginPassword: '登陆密码',
            loginContent: '建议您使用字母和数字的组合、混合大小写，在组合中加入下划线等符号。',
            loginChange: true,
            iconlogpwd: 'iconshezhi_denglumima',
            //支付密码
            payPassword: '支付密码',
            payContent: '申请取款时使用的密码。',
            payChange: true,
            showPWDC: false,    //控制显示修改支付密码
            iconpaypwd: 'iconshezhi_zhifumima',
            //快捷密码
            quickPassword: '快捷密码',
            quickContent: '九宫格密码',
            quickChange: true,
            iconqkpwd: 'iconshezhi_kuaijiemima',
            //安全问题
            security: '安全问题',
            securityContent: '绑定安全问题后可以通过安全问题找回账号资料。',
            securityChange: true,
            iconques: 'iconshezhi_anquanwenti'
        }
    },
    methods:{
        //支付密码修改事件
        payChangeMethod(){
            this.showPWDC = !this.showPWDC;
            console.log(this.showPWDC)
        },
        //手机号修改事件
        phoneChangeMethod(){
            this.showPhoneSetting = !this.showPhoneSetting
        },
        //银行卡修改事件
        bankChangeMethod(){
            this.showBank = !this.showBank;
        },
        // 修改密码
        changePwd() {
            
        },
        //修改银行卡保存事件
        saveBank(val){
            val = val.substr(val.length-4); //获取银行卡号后四位
            // console.log(val);
            this.showBank = false;
            this.bankNumber = '已绑定银行卡号：尾号' + val;
            this.bankChange = false;
        },
        //绑定手机号保存事件
        savePhone(val){
            // val = val.substr(0,3);
            // console.log(val)
            this.showPhoneSetting = false;
            this.phoneNumber = '已绑定手机号：' + val.substr(0,3) + '***' + val.substr(val.length-4);
            this.phoneChange = false;
        }
    },
    components:{
        settingItem,
        passwordChange,
        securitySettingPhone,
        securitySetting
    }
}
</script>

<style lang="stylus" scoped>
    #wrap
        height 480px;
        width 1200px;
        box-sizing border-box 
        // border 1px solid #dbd3d3;
        
        .item
            float left;
            margin-top 20px;
            margin-left 20px;
</style>